// components/TimeDisplay.tsx
import { useEffect, useState } from "react";
import styles from "./index.module.scss";

const getWeekday = (date: Date) => {
  const weekdays = ["日", "一", "二", "三", "四", "五", "六"];
  return `星期${weekdays[date.getDay()]}`;
};

export default function TimeDisplay() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className={styles.timeContainer}>
      {/* 时分秒 */}
      <div className={styles.time}>
        {time.toLocaleTimeString("zh-CN", {
          hour12: false,
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit"
        })}
      </div>
      
      {/* 日期信息 */}
      <div className={styles.dateRow}>
        <span className={styles.gregorian}>
          {`${time.getMonth() + 1}月${time.getDate()}日`}
        </span>
        <span className={styles.weekday}>
          {getWeekday(time)}
        </span>
      </div>
    </div>
  );
}